<template>
    <div class="AllThis">
    <Nav/>
      <div class="bookbg"></div>
      <div class="bookContentAll">
        <div class="bookContentPicture">
          <img
            style="width:300px;height:400px"
            :src="bookchanges_item"
            alt
          />
        </div>
        <div class="bookContentDetails" name="top">
          <h3 class="bookContent_titles">{{bName}}</h3>
          <p class="bookContent_contents">{{bookIntroduce}}</p>
          <p class="bookContent_author">
            <span class="bookContent_auhor_next" style="margin-left:0px">作者:{{author}}著</span>
            <span class="bookContent_auhor_next">出版社:{{publish}}</span>
            <span class="bookContent_auhor_next">出版时间:{{pTime | time}}</span>
          </p>
          <p class="bookContent_Rate">
            <span>在当前文学榜中排名6位</span>
            <span class="bookContent_Rates">
              <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#000000"
                score-template="{value}"
              ></el-rate>
            </span>
          </p>
          <div class="bookContentTag">
            <span style="position:relative;top:-10px">
              <svg
                t="1602491258068"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1885"
                width="30"
                height="30"
              >
                <path
                  d="M198.364325 194.675818C266.253528 126.830617 353.781 82.793658 450.482413 68.945255c118.216425-17.038048 236.039901 13.105482 331.626933 84.752266 95.653547 71.559802 157.666926 176.190815 174.638459 294.406217 35.059494 244.209978-135.100978 471.208968-379.136993 506.376932-102.33676 14.678304-207.27374-6.771217-295.476595-60.375066-15.09479-9.131985-19.899212-28.79072-10.725272-43.817971 9.217942-15.030321 28.789697-19.922748 43.861974-10.746762 75.577303 45.870724 165.507498 64.262606 253.252935 51.681056 209.128995-30.013571 355.00027-224.725204 324.96521-434.030208C878.919229 355.837334 825.796334 266.191618 743.795738 204.89967c-81.957617-61.511959-182.895517-87.198991-284.22739-72.694649-209.347982 30.055526-355.153766 224.725204-325.075727 434.030208 7.90811 54.782697 26.91193 105.939821 56.618509 152.074557 9.523911 14.896268 5.198395 34.729989-9.567913 44.2539-14.854313 9.523911-34.601052 5.242398-44.166919-9.567913-34.68701-53.997821-56.901964-113.716948-66.142419-177.675632-16.994046-118.215402 13.149485-236.083903 84.796268-331.714937C169.072185 226.131227 183.226556 209.792097 198.364325 194.675818L198.364325 194.675818 198.364325 194.675818zM322.675562 354.61346c-18.458397 0-28.309766-9.828856-29.642111-29.575596 1.332345-18.435884 11.183713-28.264741 29.642111-29.619598l378.700041 0c17.081027 1.354857 26.954909 11.184737 29.598108 29.619598-2.6432 19.74674-12.516058 29.575596-29.598108 29.575596l-140.039453 0 0 104.58701 136.085398 0c17.10354 1.310855 26.932396 11.795651 29.598108 31.54239-2.664689 19.702738-12.494569 29.619598-29.598108 29.619598L561.337173 520.362458l0 128.177288 149.890822 0c18.414395 1.354857 28.942169 10.5728 31.56388 27.608801 0 19.74674-9.195429 30.231535-27.609825 31.586392L312.780191 707.73494c-17.081027-1.354857-26.299993-11.839653-27.609825-31.586392 1.309832-17.036002 10.528797-26.253944 27.609825-27.608801l39.449477 0L352.229668 437.531961c0-19.788695 9.872858-30.973432 29.619598-33.55114 19.702738 2.578732 30.231535 13.762445 31.541367 33.55114l0 211.008808 84.84027 0L498.230903 354.61346 322.675562 354.61346 322.675562 354.61346zM322.675562 354.61346"
                  p-id="1886"
                  fill="#bfbfbf"
                />
              </svg>
            </span>
            <span style="position:relative;top:-10px" class="smallIconss">正品保障</span>
            <span style="position:relative;top:-10px;margin-left:40px">
              <svg
                t="1602491851713"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7108"
                width="28"
                height="28"
              >
                <path
                  d="M512 95.333c229.747 0 416.667 186.91 416.667 416.667 0 229.756-186.92 416.666-416.667 416.666S95.333 741.756 95.333 512C95.333 282.243 282.254 95.333 512 95.333M512 12C235.857 12 12 235.856 12 512c0 276.143 223.856 500 500 500 276.143 0 500-223.857 500-500 0-276.144-223.856-500-500-500z"
                  p-id="7109"
                  fill="#bfbfbf"
                />
                <path
                  d="M314.125 555.538c-14.15 0-27.954-7.202-35.767-20.223-11.841-19.735-5.442-45.329 14.282-57.17 0.376-0.224 37.221-22.38 58.36-38.839 11.515-8.952 15.95-17.212 41.524-70.557l9.023-18.778c36.835-76.518 109.446-90.007 146.301-85.836l167.236 20.895c22.838 2.849 39.033 23.682 36.174 46.509-2.857 22.827-23.691 39.205-46.508 36.174l-166.668-20.834c-3.163-0.203-41.605-1.993-61.462 39.226l-8.952 18.656c-27.456 57.292-37.73 78.735-65.511 100.342-25.126 19.531-64.951 43.498-66.64 44.495a41.427 41.427 0 0 1-21.392 5.94z"
                  p-id="7110"
                  fill="#bfbfbf"
                />
                <path
                  d="M535.58 760.515c-39.49 0-101.054-17.944-134.033-86.467l-9.023-18.778c-25.574-53.345-30.009-61.604-41.514-70.557-21.148-16.459-57.993-38.615-58.37-38.839-19.725-11.841-26.123-37.435-14.282-57.17 11.841-19.734 37.445-26.143 57.159-14.282 1.689 0.997 41.514 24.964 66.65 44.495 27.771 21.606 38.045 43.05 65.501 100.342l8.952 18.656c20.833 43.233 61.595 39.205 62.032 39.164l166.098-20.772c22.816-2.868 43.65 13.347 46.508 36.174 2.859 22.827-13.336 43.66-36.174 46.509l-166.666 20.833c-3.927 0.448-8.23 0.692-12.838 0.692z"
                  p-id="7111"
                  fill="#bfbfbf"
                />
              </svg>
            </span>
            <span class="smallIconss">服务支持</span>
            <span style="position:relative;top:-10px;margin-left:40px">
              <svg
                t="1602491925552"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8318"
                width="32"
                height="32"
              >
                <path
                  d="M737 514.2H287c-9.4 0-17-7.6-17-17v-77.8c0-9.4 7.6-17 17-17h450c9.4 0 17 7.6 17 17v77.8c0 9.4-7.6 17-17 17z m-433-34h416v-43.8H304v43.8z"
                  p-id="8319"
                  fill="#bfbfbf"
                />
                <path
                  d="M719 728.1H305c-9.4 0-17-7.6-17-17V497.2c0-9.4 7.6-17 17-17h414c9.4 0 17 7.6 17 17v68c0 9.4-7.6 17-17 17s-17-7.6-17-17v-51H322V694h380v-59.9c0-9.4 7.6-17 17-17s17 7.6 17 17V711c0 9.5-7.6 17.1-17 17.1zM675.2 436.4c-4 0-8-1.4-11.2-4.2-7.1-6.2-7.8-16.9-1.6-24 17.5-20.1 15.5-50.6-4.6-68.2-20.1-17.5-50.6-15.5-68.2 4.6l-65 74.4c-6.2 7.1-16.9 7.8-24 1.6-7.1-6.2-7.8-16.9-1.6-24l65.1-74.5c29.9-34.2 82-37.7 116.2-7.8 34.2 29.9 37.7 82 7.8 116.2-3.4 3.9-8.1 5.9-12.9 5.9z"
                  p-id="8320"
                  fill="#bfbfbf"
                />
                <path
                  d="M348.8 436.4c-4.7 0-9.4-2-12.8-5.8-29.9-34.2-26.4-86.3 7.8-116.2 16.6-14.5 37.8-21.6 59.7-20.2 21.9 1.5 42 11.4 56.5 28l65.1 74.5c6.2 7.1 5.5 17.8-1.6 24-7.1 6.2-17.8 5.5-24-1.6l-65.1-74.5c-8.5-9.7-20.3-15.5-33.1-16.4-12.9-0.9-25.3 3.3-35 11.8-20.1 17.5-22.1 48.1-4.6 68.2 6.2 7.1 5.5 17.8-1.6 24-3.4 2.8-7.4 4.2-11.3 4.2z"
                  p-id="8321"
                  fill="#bfbfbf"
                />
                <path
                  d="M587.1 730c-9.4 0-17-7.6-17-17V499c0-9.4 7.6-17 17-17s17 7.6 17 17v213.9c0 9.4-7.6 17.1-17 17.1zM436.9 730c-9.4 0-17-7.6-17-17V499c0-9.4 7.6-17 17-17s17 7.6 17 17v213.9c0 9.4-7.6 17.1-17 17.1z"
                  p-id="8322"
                  fill="#bfbfbf"
                />
                <path
                  d="M512 106.5c54.8 0 107.9 10.7 157.8 31.8 48.3 20.4 91.6 49.7 128.9 86.9s66.5 80.6 86.9 128.9c21.1 50 31.8 103.1 31.8 157.8s-10.7 107.9-31.8 157.8c-20.4 48.3-49.7 91.6-86.9 128.9s-80.6 66.5-128.9 86.9c-50 21.1-103.1 31.8-157.8 31.8-54.8 0-107.9-10.7-157.8-31.8-48.3-20.4-91.6-49.7-128.9-86.9-37.3-37.3-66.5-80.6-86.9-128.9-21.1-50-31.8-103.1-31.8-157.8s10.7-107.9 31.8-157.8c20.4-48.3 49.7-91.6 86.9-128.9 37.3-37.3 80.6-66.5 128.9-86.9 49.9-21.1 103-31.8 157.8-31.8m0-42.5C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z"
                  p-id="8323"
                  fill="#bfbfbf"
                />
              </svg>
            </span>
            <span class="smallIconss">礼品包装</span>
          </div>
          <p class="bookContent_prices">￥{{sale}}</p>
          <div style="margin-top:20px;">
            <b-form-spinbutton id="sb-inline" v-model="valueNum" inline></b-form-spinbutton>
            <el-button type="primary" style="margin-left:50px" @click="goBuy">购买</el-button>
          </div>
            <div class="selectImg">
              <ul>
                <li class="selectImg_img" v-for="(item,index) in bookset" :key="index" ref="dom">
                  <img style="width:50px;heigth:50px" :src="item" alt="" @mouseover="changePicture(index)" @mouseout="changePicture1(index)">
                </li>
                
              </ul>
        </div>
        </div>    
      </div>
        <div class="bookContent_showDetails">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="商品详情" name="first">
              <div class="productContent">
                <div class="productContent_author">
                      <p class="prouctContent_author_introduce"><span style="padding-left:10px" >商品介绍</span></p>
                      <p class="prouctContent_author_introduce_content">
                        <img :src="introduceImg" alt="">
                      </p>
                      
                  </div>

                  <div class="productContent_author">
                      <p class="prouctContent_author_introduce"><span style="padding-left:10px" >作者简介</span></p>
                      <p class="prouctContent_author_introduce_content">{{authorIntroduce}}
                      </p>
                      
                  </div>
                     <div class="productContent_author" style="margin-top:30px">
                      <p class="prouctContent_author_introduce"><span style="padding-left:10px" >内容推荐</span></p>
                      <p class="prouctContent_author_introduce_content">{{contentIntroduce}}
                      </p>
                      
                  </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品评论" name="second">
              <div class="authorComment" v-for="(item,index) in comments" :key="index">
                <div class="authorComment_left">
                  <p class="authorComment_left_rate">
                    <el-rate
                      v-model="item.rate"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    ></el-rate>
                  </p>
                  <p class="authorComment_left_content">{{item.comment}}</p>
                  <p class="authorComment_left_time">{{item.commTime | time}}</p>
                </div>
                <div class="authorComment_right">
                    <p>
                        <img style="width:70px;height:70px;border-radius:50%;margin-top:20px" :src="`http://localhost:3000/upload/${item.headImg}`" alt="">
                    </p>
                    <p class="authorComment_right_name">{{item.nickName}}</p>
                </div>
              </div>
              
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="scroll_bite">
          <p>
            <img style="width:50px;height:50px" :src="imagePath1" alt="">
          </p>
          <p style="margin-top:10px;">
            <el-button :plain="true" @click="open1" style="width:10px">用户<br/><span style="margin-left:-12px;margin-top:-2px">反馈</span></el-button>
          </p>
          <p class="goHead"><a style="text-decoration:none;color:black" href="#top"><span style="padding-left:10px;padding-top:5px;position: relative;top: 8px;left:2px">顶部<br/><span style="padding-left:10px">导航</span></span></a></p>
          <!-- <p><button style="height:50px;width:50px" @click="goHead"><a herf="#">顶部</a></button></p> -->
        </div>
        <div class="writeComments">
          <div @click="bindOK">
              <b-button v-b-modal.modal-center >写评论赚积分</b-button>
              <b-modal id="modal-center" centered title="BootstrapVue" ok-title="发布" cancel-title="取消">
                <p class="my-4">
                  <p style="font-size:20px;font-family:黑体;margin-left:20px">我对本书的评分是：</p>
                  <p style="margin-left:80px;margin-top:-10px"><el-rate v-model="commentRate" show-text></el-rate></p>
                  <p style="margin-left:20px">
                    <el-input style="width:400px" type="textarea" placeholder="这本书的内容、作者、文笔...给你留下了怎样的印象？是否值得推荐给其他书友？写下你的书评吧~" v-model="textarea" maxlength="100" show-word-limit></el-input>
                  </p>
                
              </b-modal>
            </div>
        </div>
    </div>

</template>

<script>
import Nav from '../../components/Nav.vue'
export default {
  
  data() {
    return {
      value: 3.7,
      values: 2,
      num: 1,
      valueNum:1,
      activeName: "second",
      imagePath1:require('../../assets/images/buyBook.png'),
      bookset:['http://img3m9.ddimg.cn/12/30/26917419-1_x_3.jpg','http://img3m9.ddimg.cn/12/30/26917419-2_x_3.jpg','http://img3m9.ddimg.cn/12/30/26917419-3_x_3.jpg','http://img3m9.ddimg.cn/12/30/26917419-4_x_2.jpg'],
      bookchanges:['http://img3m9.ddimg.cn/12/30/26917419-1_u_3.jpg','http://img3m9.ddimg.cn/12/30/26917419-2_u_3.jpg','http://img3m9.ddimg.cn/12/30/26917419-3_u_3.jpg','http://img3m9.ddimg.cn/12/30/26917419-4_u_2.jpg'],
      bookchanges_item:'http://img3m9.ddimg.cn/12/30/26917419-1_u_3.jpg',
      bName:"书名",
      sale:0,
      bookIntroduce:'',
      introduceImg:'',
      author:'',
      publish:'',
      pTime:'',
      contentIntroduce:'',
      authorIntroduce:'',
      bId:0,
      commentRate:0,
      textarea:'',
      comments:[]
    };
  },
    components:{
    Nav
  },
  filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
  },
  methods: {
      open1() {
        this.$message({
          showClose: true,
          message: '此功能暂未开通,敬请期待！'
        });
      },
    handleChange(value) {
      console.log(value);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    goBuy(){
      
      this.$store.state.bookNum = this.num
      if(this.bId!=0){
        this.$store.state.bookId = this.bId
        this.$store.state.bookCount = this.valueNum
        console.log(this.$store.state.bookId)
         this.$router.push('/mainshow/buy')
      }else{
        alert("无效")
      }
    },
    changePicture(index){
      let str = 'img'+index
      console.log(str)
     this.$refs.dom[index].style.border="3px solid #ccc"
      this.bookchanges_item = this.bookchanges[index]
    },
    changePicture1(index){
      this.$refs.dom[index].style.border="none"
    },
    bindOK(){
      console.log('事件绑定')
      let that = this
      $('.btn-primary').on('click',function(){
        that.$axios.get("http://localhost:3000/bookShop/publishComment",{params:{bId:that.$store.state.bookId,comment:that.textarea,rate:that.commentRate,uId:that.$store.state.ownUid}})
        .then(res=>{
          console.log('res',res)
              that.$axios.get('http://localhost:3000/bookShop/searchComment',{params:{bId:that.$store.state.bookId}})
              .then(res=>{
                console.log('res',res)
                that.comments = res.data.data
                console.log(that.comments)
              })
              .catch(err=>{
                console.log('err',err)
              })
        })
        .catch(err=>{
          console.log('err',err)
        })
        
      })
    }
  },
  created(){
    let bId = this.$store.state.bookId
    console.log(bId)
    this.$axios.get('http://localhost:3000/bookShop/searchBook',{params:{bId:bId}})
    .then(res=>{
      let contentShow = res.data.data
      let pictures = contentShow[0].bookImg
      this.bookset = pictures.split(',')
      this.bookchanges = contentShow[0].bigbookImg.split(',')
      this.bName = contentShow[0].bName
      this.sale = contentShow[0].sale
      this.bookIntroduce = contentShow[0].bookIntroduce
      this.introduceImg = contentShow[0].intruduceImg
      this.author = contentShow[0].author
      this.publish = contentShow[0].publish
      this.pTime = contentShow[0].pTime
      this.contentIntroduce = contentShow[0].contentIntroduce
      this.authorIntroduce = contentShow[0].authorIntroduce
      this.bookchanges_item = this.bookset[0]
      this.bId = contentShow[0].bId
      this.value = contentShow[0].bookRate
    })
    .catch(err=>{
      console.log('err',err)
    })

    this.$axios.get('http://localhost:3000/bookShop/searchComment',{params:{bId:this.$store.state.bookId}})
    .then(res=>{
      console.log('res',res)
      this.comments = res.data.data
      console.log(this.comments)
    })
    .catch(err=>{
      console.log('err',err)
    })
  }
};
</script>


<style lang='scss' scoped>
/deep/.el-textarea__inner{
  height:200px;
}
.el-button /deep/ span{
  margin-left: -5px;
}
.bookbg{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -99;
  background-color: #fff;

}
.writeComments{
  width: 100px;
  height: 100px;
  position: fixed;
  left: 50px;
  top: 50%;
  // background-color: black;
}
.el-button /deep/span{
  position: relative;
  left: 4px;
  top: -10px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
li+li{
  margin-left: 20px;
}
.selectImg_img{
  width:50px;
  height:50px;
  float: left;
  // border: 2px solid #ccc;
}
.selectImg{
  // background-color: black;
  width: 300px;
  height: 100px;
  margin-top: 5px;
  margin-left: -350px;
  position: relative;
  top: -80px;
  left: 10px;
}
.goHead{
  width: 50px;
  height: 50px;
    border: 1px solid #ccc;
    font-size: 5px;
    margin-top:10px
    
}
/deep/ .el-button span{
  font-size: 5px;
  margin-left: -8px;
  position: relative;
  top: -2px;
}

.scroll_bite{
  width: 50px;
  height: 300px;
  // background-color: blue;
  position: fixed;
  right: 0;
  bottom: 0;
  margin-right: 80px;
}
.prouctContent_author_introduce{
    width:900px;
    height:40px;
    border-left:5px solid red;
    line-height:50px;
    font-size: 20px;
    font-family: 黑体;
    line-height: 40px;
    border-bottom: 2px solid #ccc;

}
.prouctContent_author_introduce_content{
    margin-top: 10px;
    font-size: 18px;
    line-height: 1.5em;
    text-indent: 2em;
    font-family: 宋体;
}
.authorComment_right_name{
    font-family: 仿宋;
    margin-left: 12px;
    margin-top: 10px;
    
}
// p .el-rate[data-v-b0f548cc] {
//   margin-top: 0px !important;
// }
.authorComment_left_rate {
  margin-left: 5px;
  // margin-top: -0px;
}
.authorComment_left_content,.authorComment_left_time{
    margin-top: 20px;
    margin-left: 5px;
}

.AllThis {
  background-color: white !important ;
  height: 100%;
}
.authorComment_left {
  width: 750px;
  height: 100%;
  float: left;
  background-color: white;
}
.authorComment_right {
  width: 100px;
  height: 150px;
  float: left;
//   background-color: black;
  margin-left: 50px;
}
.authorComment {
  width: 1000px;
  height: 150px;
  border-bottom: 1px solid #ccc;
}
.bookContent_showDetails_leftImg {
  margin-top: 40px;
  width: 790px;
//   height: 1000px;
  float: left;
}
.bookContent_showDetails_rightContent {
  width: 200px;
  height: 600px;  
  background-color: yellow;
  float: left;
}
.advertising {
  width: 200px;
  height: 500px;
  float: left;
  position: relative;
  left: 350px;
  // background-color: black;
  margin-top: 20px;
}
.bookContent_showDetails {
  width: 900px;
  // height: 600px;
  // background-color: black;
  position: relative;
  left: 50%;
  margin-left: -600px;
}
.smallIconss {
  position: relative;
  top: -8px;
  margin-left: 5px;
}
.bookContentTag {
  width: 500px;
  height: 50px;
  // background-color: black;
  padding-top: 20px;
}
.bookContent_prices {
  margin-top: 10px;
  font-size: 25px;
  color: red;
}
.el-rate {
  margin-top: 15px;
}
.bookContent_Rate {
  margin-top: 20px;
  font-size: 20px;
  font-family: 宋体;
}
.bookContent_auhor_next {
  margin-left: 30px;
}
.bookContent_author {
  margin-top: 20px;
  font-size: 20px;
  font-family: 宋体;
}
.bookContent_contents {
  margin-top: 20px;
  font-size: 20px;
  font-family: 宋体;
  width: 750px;
  height: 90px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
   text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.5em;
}
.bookContent_titles {
  font-size: 30px;
  font-family: Microsoft JhengHei;
  margin-top: 20px;
}
.bookContentAll {
  margin-top: 60px;
  width: 1200px;
  height: 500px;
  // background-color: yellow;
  position: relative;
  left: 50%;
  margin-left: -600px;
}
.bookContentPicture {
  width: 300px;
  height: 400px;
  background-color: black;
  float: left;
}
.bookContentDetails {
  width: 750px;
  height: 400px;
  // background-color: blue;
  float: left;
  margin-left: 50px;
}
*, *::before, *::after {
    box-sizing:unset;
}
</style>
